<template>
  <el-dialog
      v-bind="$attrs"
      v-model="dialog.visible"
      :close-on-click-modal="false"
      destroy-on-close
      class="dialog-detail"
      @close="handleClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="dialog-header">
        <h4 :id="titleId" :class="titleClass">{{ dialog.title }}</h4>
      </div>
    </template>
    <el-row class="dialog-wrapper">
      <el-col v-for="item in fields" :key="item.value" class="flex items-center" :span="12">
        <div class="el-form-item px-4 w-full flex items-center  gap-[8px]">
          <label class="el-form-item__label">
            <span>{{ item.label }}</span>
          </label>
          <div class="el-form-item__content flex items-center gap-[8px] flex-auto">
            <span v-if="item.type === 'time'">
              {{
                row[item.value] ?
                    dayjs(row[item.value]).format(item.format ?? 'YYYY-MM-DD HH:mm:ss')
                    : ''
              }}
            </span>
            <span v-else-if="item.type === 'function'">
              {{ item.function(row) ?? '' }}
            </span>
            <div v-else-if="item.type === 'slot'">
              <slot :name="item.value" :row="row"/>
            </div>
            <template v-else-if="item.type === 'tag'">
              <el-tag
                  v-for="(u,i) in row[item.value]?.split(',') ?? []" :key="i"
                  :color="u.color ?? hexToRgba('#3c5fe4',.1)"
                  :style="{color:u.color ?? '#3c5fe4'}"
              >
                {{ u }}
              </el-tag>
            </template>
            <span v-else>{{ row[item.value] ?? '' }}</span>
          </div>
          <el-icon>
            <CopyDocument/>
          </el-icon>
        </div>
      </el-col>
    </el-row>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import dayjs from "dayjs";
import {CopyDocument} from '@element-plus/icons-vue'

const dialog = reactive({
  visible: true,
  title: '详情'
});

// 示例
const row = ref<Record<string, any>>({
  createTime: 1689326687696,
  createUser: "default-super",
  tag: '政务,教育'
})
const fields = reactive<Record<string, any>>([
  {
    label: '用户姓名:',
    value: 'createUser'
  },
  {
    label: '申请时间:',
    value: 'createTime',
    type: 'time'
  },
  {
    label: '标签:',
    value: 'tag',
    type: 'tag'
  },
])


// 关闭弹窗
const handleClose = () => {
  dialog.visible = false;
};

function hexToRgba(hex, alpha) {
  const rgb = hex.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
  const red = parseInt(rgb[1], 16);
  const green = parseInt(rgb[2], 16);
  const blue = parseInt(rgb[3], 16);

  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
}


</script>

<style lang="scss">
.dialog-detail {
  gap: 8px;

  .dialog-header {
    h4 {
      line-height: 32px;
    }
  }

  .dialog-wrapper {
    .el-form-item__content {
      span {
        font-size: 14px;
        font-weight: 400;
        color: #010a0f;
      }
    }
  }

  .dialog-footer {
    line-height: 32px;
  }
}

</style>